<template>
  <div>
    <div class="timeOver"
         v-if="showData">
      <div class="imgOver"
           :animation="animationData">
        <img :src=img>
        <span class="confirmBtn"
              @click.stop="confirm">确定</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      img: './../../static/images/timeUp.png',
      showData: false,
      animationData: ''
    }
  },
  mounted () {
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    this.animation = animation
    animation.opacity(1).translateY(200).scale(1, 1).step()
    this.animationData = animation.export()
    let that = this
    setTimeout(() => {
      that.showData = true
    }, 2000)
  },
  methods: {
    confirm () {
      wx.navigateTo({
        url: ''
      })
    }
  }

}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  position: relative;
}
.timeOver {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
.imgOver {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 418rpx;
  height: 400rpx;
  transform: translateY(-100px);
}
.imgOver img {
  width: 418rpx;
  height: 284rpx;
  position: relative;
}
.confirmBtn {
  display: inline-block;
  padding: 10rpx 20rpx;
  background: #f7b552;
  border-radius: 10rpx;
  position: absolute;
  width: 180rpx;
  text-align: center;
  bottom: 0px;
  left: 50%;
  font-size: 36rpx;
  text-align: center;
  color: white;
  margin-left: -100rpx;
  letter-spacing: 5rpx;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -200%, 0), scale3d(0.3, 0.3, 0.3);
    transform: translate3d(0, -200%, 0), (0.3, 0.3, 0.3);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
</style>
